/* 
 成绩录入

 1 查询成绩
  1 打开页面的调用一个函数  发送请求 获取数据  渲染页面 
 2 修改成绩 
    1 实现 双击事件 dblclick 可以把input 显示出来   使用事件委托
     1 控制input标签 里面的value 等于 单元格里面的内容   
     2 给 input框 获得焦点 focus()

    2 失去焦点 结束修改
    1 给input标签绑定 失去焦点事件 (不能使用事件委托了， 因为只有表单标签存在失去焦点事件)
    2 获取到输入框里面的内容，拼接成参数 发送给后端 完成编辑
    3 后端响应 编辑成功 
      1 弹出一个提示
      2 重新获取最新的数据  
 */
const tbody = document.querySelector('tbody');

function getScoreList() {
    axios.get('/score/list').then((result) => {
        // console.log(result);
        // 判断 业务码 是否正确
        if (result.data.code === 0) {
            // console.log(result.data.data);
            const obj = result.data.data;
            // 遍历对象 生成html标签
            let html = '';
            for (const key in obj) {
                // key  = 属性名
                // obj[key] =  属性值
                html += `<tr>
                    <th scope="row">${key}</th>
                    <td>${obj[key].name}</td>`;

                const ht = obj[key].score.reduce((h, v, i) => h + `<td class="score" >
                    ${v}<input type="text" data-id=${key} data-batch="${i + 1}" 
                    </td>`, '');
                html += ht + `</tr>`;
            }

            // 把html渲染出来
            tbody.innerHTML = html;

            // 绑定 失去 焦点事件
            // 完成修改 获取数据并且发送给后端  更新页面
            const inputs = tbody.querySelectorAll('input');
            // console.log(inputs.length);
            inputs.forEach((input) => {
                input.addEventListener("blur", function () {
                    // console.log(111);
                    // 准备数据 
                    const data = {
                        "stu_id": this.dataset.id,

                        "batch": this.dataset.batch,

                        "score": this.value

                    }
                    // console.log(data);
                    axios.post("/score/entry", data).then(result => {
                        if (result.data.code === 0) {
                            getScoreList();
                        }
                    });
                })
            });
        }
    });
}

getScoreList();

// 使用事件委托  双击事件
tbody.addEventListener("dblclick", function (e) {
    if (e.target.nodeName === 'TD' && e.target.classList.contains("score")) {
        // console.log(111);
        // 显示 input
        const input = e.target.querySelector("input");
        input.style.display = "block";
        // 获得焦点！！！
        input.focus();
        input.value = e.target.innerText;
    }
})